import {Component, OnInit, ViewChild} from '@angular/core';
import {ShowCaseService} from './show-case.service';
import {LocalStorageService} from '../../../../lib/service/local-storage.service';
import {AliyunOssOutputUrl} from '../../../../../config/api';
import {ModalDirective} from 'ngx-bootstrap';
import {AdOssUploadService} from '../../../../lib/service/ad-oss-upload.service';

@Component({
  selector: 'app-show-case',
  templateUrl: 'show-case.component.html',
  styleUrls: ['show-case.component.scss'],
  providers: [ShowCaseService, LocalStorageService, AdOssUploadService]
})
export class ShowCaseComponent implements OnInit {

  list = [];
  aliyunOssOutputUrl;
  ShowCaseDetailList = [];
  del_id;
  nowShowCase;

  @ViewChild('deleteModal') public deleteModal: ModalDirective;
  @ViewChild('addUnitModal') public addUnitModal: ModalDirective;
  @ViewChild('editUnitModal') public editUnitModal: ModalDirective;

  name;
  types = '';
  relationID = 0;
  sort;
  url;
  img_url;
  img_file;
  img_name;
  showcaseDetailImg = true;
  allGoodsList = [];
  allActivityList = [];
  couponList = [];

  type;
  message;
  isShow;

  id;


  constructor(private showCaseService: ShowCaseService,
              private localStorageService: LocalStorageService,
              private adOssUploadService: AdOssUploadService) {
    this.aliyunOssOutputUrl = AliyunOssOutputUrl;
  }

  ngOnInit() {
    this.getShowcaseList();
    this.getGoodsList();
    this.getActivityList();
    this.getCouponList();
  }

  getShowcaseList() {
    this.showCaseService.getShowcaseList(this.localStorageService.getNowApplet().template_id).subscribe(
      res => {
        this.list = res.data.data;
      });
  }

  doManage(item) {
    this.nowShowCase = item;
    this.showCaseService.getShowCaseDetail(this.localStorageService.getNowApplet().applet_uuid, item.id).subscribe(
      res => {
        this.ShowCaseDetailList = res.data.data;
      }
    );
  }

  delDialog(id: number) {
    this.del_id = id;
    this.deleteModal.show();
  }

  delShowCaseDetail() {
    this.showCaseService.delShowCaseDetail(this.del_id).subscribe(res => {
      if (res.code === 2000) {
        this.ShowCaseDetailList.every((val, idx, array) => {
          if (val.id === this.del_id) {
            this.ShowCaseDetailList.splice(idx, 1);
          }
          return true; // Continues
        });
      }
    });
    this.deleteModal.hide();
  }

  addUnitDlg() {
    this.name = null;
    this.types = '';
    this.relationID = 0;
    this.sort = null;
    this.url = null;
    this.img_url = null;
    this.img_file = null;
    this.img_name = null;
    this.showcaseDetailImg = true;
    this.allGoodsList = [];
    this.getGoodsList();
    this.addUnitModal.show();
  }

  // 新增展位单元提交
  addUnitSubmit() {
    this.showCaseService.postAddUnit(
      this.localStorageService.getNowApplet().applet_uuid,
      this.nowShowCase.id,
      this.name,
      this.types,
      this.sort,
      this.relationID,
      this.url
    ).subscribe(
      res => {
        if (res.code === 2000) {
          this.uploadFile(res.data.id);
          this.type = 'success';
          this.message = '添加成功';
          this.isShow = true;
          this.addUnitModal.hide();
        } else {
          this.type = 'error';
          this.message = res.message;
          this.isShow = true;
        }
      }
    );
  }

  // 编辑展位单元
  editUnitDialog(id: number) {

    this.id = id;

    this.name = null;
    this.types = '';
    this.relationID = 0;
    this.sort = null;
    this.url = null;
    this.img_url = null;
    this.img_file = null;
    this.img_name = null;
    this.showcaseDetailImg = true;
    this.allGoodsList = [];
    this.getGoodsList();

    this.showCaseService.getUnitDetail(id).subscribe(res1 => {
      this.name = res1.data.name;
      this.types = res1.data.type;
      this.sort = res1.data.sort;
      this.url = res1.data.url;
      if (res1.data.image) {
        this.img_url = this.aliyunOssOutputUrl + '/' + res1.data.image + '?' + res1.data.updated_at;
      }
      if (this.types === 'product') {
        this.showCaseService.getGoodsList(this.localStorageService.getNowApplet().applet_uuid, 1, 999).subscribe(
          res2 => {
            this.allGoodsList = res2.data.data;
            this.allGoodsList.every((val, idx, array) => {
              if (val.id === res1.data.relationID) {
                this.relationID = res1.data.relationID;
              }
              return true;
            });
          });
      } else if (this.types === 'activity') {
        this.allActivityList.every((val, idx, array) => {
          // console.log(val.id);
          if (val.id === res1.data.relationID) {
            this.relationID = res1.data.relationID;
            // console.log(this.relationID);
          }
          return true;
        });
      } else if (this.types === 'coupons') {
        this.couponList.every((val, idx, array) => {
          if (val.card_coupons_uuid === res1.data.relationID) {
            this.relationID = res1.data.relationID;
          }
          return true;
        });
      }
      this.editUnitModal.show();
    });

    /*this.img_name = '';
     this.operateUnitID = id;
     this.goodsManageService.getGoodsList(this.nowApplet.applet_uuid,1,999).subscribe(
     res => {
     this.allGoodsList = res.data.data;
     }
     );
     this.goodsManageService.getUnitDetail(this.token, id)
     .subscribe(
     res => {
     if (res.code === 2000) {
     this.editUnit = res.data;
     this.img_url = this.aliyunOssOutputUrl + '/' + res.data.image;
     this.editUnitModal.show();
     } else {
     this.type = 'error';
     this.message = res.message;
     this.isShow = true;
     }
     }
     );*/
  }

  translateType(type) {
    switch (type) {
      case 'product':
        return '产品';
      case 'activity':
        return '活动';
      case 'page':
        return '页面';
      case 'picture':
        return '图片';
      case 'coupons':
        return '卡券';
    }
  }

  editUnitSubmit() {
    console.log(this.relationID);
    this.showCaseService.postEditUnit(
      this.id,
      this.localStorageService.getNowApplet().applet_uuid,
      this.nowShowCase.id,
      this.name,
      this.types,
      this.sort,
      this.relationID,
      this.url
    ).subscribe(
      res => {
        if (res.code === 2000) {
          this.uploadFile(this.id);
          this.type = 'success';
          this.message = '修改成功';
          this.isShow = true;
          this.editUnitModal.hide();
        } else {
          this.type = 'error';
          this.message = res.message;
          this.isShow = true;
        }
      }
    );
    /*this.editUnit.token = this.token;
     this.goodsManageService.postEditUnit(this.editUnit)
     .subscribe(
     res => {
     if (res.code === 2000) {
     if (!!this.img_name) {
     this.adOssUploadService.getSignature('/v1/common/showcase_detail/' + this.editUnit.id + '?callback=true').subscribe(
     res1 => {
     this.adOssUploadService.fileUpload(this.img_file, res1.data, this.img_name, 'image').subscribe(
     res2 => {
     if (res2.status === 200) {
     this.type = 'success';
     this.message = '修改成功';
     this.isShow = true;
     this.editUnitModal.hide();
     this.manage(this.operateID, this.operateName);
     } else {
     this.type = 'error';
     this.message = '图片上传失败';
     this.isShow = true;
     this.editUnitModal.hide();
     this.manage(this.operateID, this.operateName);
     }
     }
     );
     }
     );
     } else {
     this.type = 'success';
     this.message = '修改成功';
     this.isShow = true;
     this.editUnitModal.hide();
     this.manage(this.operateID, this.operateName);
     }

     } else {
     this.type = 'error';
     this.message = res.message;
     this.isShow = true;
     }
     }
     );*/
  }

  uploadFile(id) {
    if (this.img_file) {
      this.adOssUploadService.getSignature('/v1/common/showcase_detail/' + id + '?callback=true').subscribe(
        res1 => {
          this.adOssUploadService.fileUpload(this.img_file, res1.data, this.img_name, 'image').subscribe(
            res2 => {
              this.doManage(this.nowShowCase);
            }
          );
        }
      );
    } else {
      this.doManage(this.nowShowCase);
    }
  }

  /*  if (res.code === 2000) {
   this.adOssUploadService.getSignature('/v1/common/showcase_detail/' + res.data.id + '?callback=true').subscribe(
   res1 => {
   this.adOssUploadService.fileUpload(this.img_file, res1.data, this.img_name, 'image').subscribe(
   res2 => {
   if (res2.status === 200) {
   this.type = 'success';
   this.message = '添加成功';
   this.isShow = true;
   this.img_name = null;
   this.img_url = null;
   this.img_file = null;
   this.addUnitModal.hide();
   this.manage(this.operateID, this.operateName);
   } else {
   this.type = 'error';
   this.message = '图片上传失败';
   this.isShow = true;
   this.img_name = null;
   this.img_url = null;
   this.img_file = null;
   this.addUnitModal.hide();
   this.manage(this.operateID, this.operateName);
   }
   }
   );
   }
   );
   } else {
   this.type = 'error';
   this.message = res.message;
   this.isShow = true;
   }*/

  // 上传图片
  uploadImg($event: any, imgName?: string) {
    this.showcaseDetailImg = true;
    const file = $event.path[0].files[0];
    const myReader = new FileReader();
    const self = this;
    const suffix = file.name.replace(/.+\./, '').toLowerCase();
    this.img_file = file;
    this.img_name = imgName + '.' + suffix;

    myReader.readAsDataURL(file);
    myReader.onloadend = function (e) {
      self.img_url = myReader.result;
    };
  }

  // 获取卡券列表
  getCouponList() {
    this.showCaseService.getCouponList(1, 999, '').subscribe(res => {
      this.couponList = res.data.data;
    });
  }

  // 获取商品列表
  getGoodsList() {
    this.showCaseService.getGoodsList(this.localStorageService.getNowApplet().applet_uuid, 1, 999).subscribe(
      res => {
        this.allGoodsList = res.data.data;
    });
  }

  // 获取活动列表
  getActivityList() {
    this.showCaseService.getActivityGoodsList(this.localStorageService.getNowApplet().applet_uuid, 1, 999).subscribe(
      res => {
        this.allActivityList = res.data.data;
    });
  }

}
